<template>
  <!-- 数据监控  -->
  <div class="data-container" style="background:#eef0f5">
    <!-- 左侧布局 -->
    <div class="data-left">
      <!--  任务执行情况  -->
      <div class="data-top">
        <!--    标题    -->
        <data-title text="分析引擎类型" @selectTablist="handleCheckWork"/>
        <!--    内容    -->
        <div class="data-details" @click="$router.push('/analysis/entity/classDisplay')">
          <detail v-for="(item, index) in details" :data="item" :key="index"></detail>
        </div>
      </div>
      <!--  网络流量接入情况  -->
      <div class="data-bottom">
        <dataTitle text="行为分类情况" @selectTablist="handleCheckWeb"/>
        <line-chart style="height:80%" :cdata="lineData"></line-chart>
      </div>
    </div>
    <!-- 右侧布局 -->
    <div class="data-right">
      <!-- 日志数据接入情况 -->
      <div class="data-top">
        <!--    标题    -->
        <dataTitle text="实体分类" @selectTablist="handleCheckLog"/>
        <div class="data-details" style="height:calc(100% - 80px)" @click="$router.push('/analysis/entity/classDisplay')">
          <div class="data-detail-box" v-for="(item,index) in logs" :key="index">
            <!--     接入数据统计       -->
            <div class="data-detail-left">
              <div class="data-detail-img">
                <img v-show="index==0" src="@/assets/images/fxyq_stfl_01.png" alt="">
                <img v-show="index==1" src="@/assets/images/fxyq_stfl_02.png" alt="">
                <img v-show="index==2" src="@/assets/images/fxyq_stfl_03.png" alt="">
              </div>
              <div class="data-detail-title">
                {{ item.title }}
              </div>
            </div>
            <div class="data-detail-right">
              <span class="countRow fontcolor-blue" style="font-size:24px;">{{ item.value }}</span>
              <span class="unit">{{ item.tip }}</span>
            </div>

          </div>
          <div class="data-count">
            <div class="data-title" style="padding:20px 0 !important;">
              <h3>分析任务</h3>
            </div>
            <div class="data-count-left">
              <el-table
                :show-header="true"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                :header-cell-style="{ background: '#F3F5FC' }"
                style="width: 100%;text-align:center;margin-top:0px !important;"

              >
<!--                <el-table-column
                  type="selection"
                >
                </el-table-column>-->
                <el-table-column
                  prop="labelName"
                  label="任务名称"

                >
                </el-table-column>
                <el-table-column
                  prop="enable"
                  label="状态"
                  width="120"
                >
                  <template slot-scope="scope">
                    <span v-show="scope.row.enable=='1'" style="color:rgb(55, 189, 127)">启用</span>
                    <span  v-show="scope.row.enable=='0'" style="color:rgb(255, 48, 47)">未启用</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="labelSource"
                  label="分析方式"
                  show-overflow-tooltip
                  width="140"
                >
                </el-table-column>
              </el-table>
            </div>
<!--            <div class="data-count-right">
              <div class="data-count-num">
                <div class="data-count-num-list">
                  <span style="flex:1;font-size: 16px;">接入数据</span>
                  <span style="font-size:24px;color:#5072EF">61</span>
                </div>
                <div class="data-count-num-list">
                  <span style="flex:1;font-size: 16px;">异常数据</span>
                  <span style="font-size:24px;color:#fb5555">12</span>
                </div>
              </div>
              &lt;!&ndash;      接入异常情况TOP5        &ndash;&gt;
              <div class="data-count-top">
                <div class="data-title">
                  <h3>接入异常情况TOP5</h3>
                </div>
                <import-top :datas="dataTop5"></import-top>
              </div>
            </div>-->
          </div>
        </div>
      </div>
      <div class="data-bottom">
        <dataTitle text="实体分类列表" :hasTab="true" @selectTablist="handleCheckWeb"/>
        <div class="data-count-left" style="height:310px;overflow:hidden;padding:0 10px;" @click="$router.push('/analysis/label/labelClassDisplay')">
          <el-table :data="entityList" :header-cell-style="{ background: '#F3F5FC' }">
            <el-table-column label="序号" align="center" width="120">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="主机IP" prop="ip" :show-overflow-tooltip="true" />
            <el-table-column label="主机名称" align="name" prop="name" width="180">
            </el-table-column>
            <el-table-column label="主机类型" align="port" prop="type">
            </el-table-column>
            <el-table-column label="主机MAC" align="port" prop="mac">
            </el-table-column>
            <el-table-column label="部门名称" align="port" prop="detName">
            </el-table-column>
            <el-table-column label="责任人" align="port" prop="uName">
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import detail from './component/detail'
import PieChart from './component/PieChart'
import LineChart from './component/LineChart'
import DataTitle from './component/DataTitle'
import importTop from './component/importTop5'
import rulesData from '@/mock/project/labelClass'

export default {
  name: 'dataMonitoring',
  components: { detail, PieChart, DataTitle,importTop,LineChart },
  data() {
    return {
      tabs: [
        {
          title: '近一日'
        },
        {
          title: '近一周'
        },
        {
          title: '近一月'
        },
        {
          title: '自定义'
        }
      ],
      time: '',
      isActive: 0,
      // 任务执行情况
      details: [
        {
          id:1,
          title: '主机规则',
          value: 37,
          color: '#466AEF',
          tip: '个数',
          img:'fxyq_01.png'
        },
        {
          id:2,
          title: '人员规则',
          value: 22,
          color: '#37BD7F',
          tip: '位数',
          img:'fxyq_02.png'
        },
        {
          id:3,
          title: '应用规则',
          value: 23,
          color: '#FF302F',
          tip: '个数',
          img:'fxyq_03.png'
        },
        {
          id:4,
          title: '数据规则',
          value: 35,
          color: '#FF302F',
          tip: '个数',
          img:'fxyq_04.png'
        },
        {
          id:5,
          title: '网络规则',
          value: 32,
          color: '#FF302F',
          tip: '个数',
          img:'fxyq_05.png'
        },
        {
          id:6,
          title: '账号规则',
          value: 66,
          color: '#FF302F',
          tip: '个数',
          img:'fxyq_06.png'
        }
      ],
      logs: [
        {
          title: '设备',
          value: 21,
          tip: '个'
        }, {
          title: '人员',
          value: 122,
          tip: '条'
        }, {
          title: '应用',
          value: 24,
          tip: '类'
        }
      ],
      // 饼状图
      cdata: {
        title: '任务管理执行状态',
        color:'#4B6EEF',
        data: [
          { value: 320, name: '启用' },
          { value: 23, name: '未启用' }
        ]
      },
      cdata2: {
        title: '作业管理执行状态',
        color:'#3ABF81',
        data: [
          { value: 320, name: '启用' },
          { value: 23, name: '未启用' }]
      },
      // 折线图
      lineData: {
        color:'#3B8BFF',
        xAxis:['登录行为', '登出行为', '文件操作行为', '软件操作行为', '网络访问行为', '运维操作行为', '异常操作行为'],
        value:[150, 230, 224, 218, 135, 147, 260]
      },
      lineData2: {
        color:'#3ABF81',
        xAxis:['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        value:[150, 230, 224, 218, 135, 147, 260]
      },
      importData: 1,
      dataTop5:[
        {title:'获取数据失败',value:62},
        {title:'日期格式转换失败',value:54},
        {title:'字典映射失败',value:32},
        {title:'字段截取失败',value:12},
        {title:'描述信息填充失败',value:5},
      ],
      tableData: [],
      entityList:[
        {
          "name": "信息中心专用服务器",
          "type": "专享主机",
          "ip": "192.168.1.222",
          "mac":"U8B1K2L3L3J56",
          "detName": "信息中心",
          "uName": "吴主任",
          "gender":"男",
          "phone":"15987456561",
          "email":"465656@sina.com"
        }
      ]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      this.tableData = rulesData.page.list
    },
    handleCheckWork(index) {
      this.isActive = index
    },
    handleCheckLog(index) {

    },
    handleCheckWeb(index){}
  }
}
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-container {
  width: 100%;
  height: 100%;
  min-height:800px;
  display: flex;
  //padding: 10px;
  justify-content: space-around;
  align-items: center;

  .data-left {
    width: 49%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .data-right {
    width: calc(50% - 20px);
    height: 100%;
    display:flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .data-left .data-top, .data-right .data-top {
    border-radius: 5px;
    height: 49% !important;
    background: #fff;
    border-radius: 4px;
    .data-title {
      padding: 10px 20px;
      display: flex;
      align-items: center;

      h3 {
        font-size: 18px;
        margin: 0;
        flex: 1
      }

      .data-tabs {
        display: flex;
        align-items: center;

        .data-tabs-list {
          font-size: 14px;
          padding: 10px 5px;
          margin: 0 5px;
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
      }
    }

    .data-details {
      height:calc(100% - 60px);
      overflow:hidden;
      padding: 20px;
      @include flex;
      justify-content:space-between !important;
      flex-wrap: wrap;
      .data-count {
        width: 100%;

        .data-count-left, .data-count-right {
          //margin-top: 30px;
          float: left;
          width: 100%;

        }

        .data-count-right {
          .data-count-num {
            width: 100%;
            @include flex;
            justify-content: space-around;

            .data-count-num-list {
              width: 44%;
              @include flex;
            }
          }

          .data-count-top {
            margin-top: 20px;
          }
        }
      }
    }
  }
}

.data-detail-box {
  width: 32%;
  padding: 20px;
  @include flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  background: #F3F5FB;
  border-radius: 4px;

  .data-detail-left {
    @include flex;

    .data-detail-title {
      font-size: 16px;
    }

    .data-detail-img {
      display: flex;
      flex: 1;
      margin-right: 5px;

      img {
        width: 30px;
        height:30px;
      }
    }

  }


}

.data-bottom{
  background:#fff;
  border-radius: 4px;
  height:calc(50% - 20px);
}
.selected {
  border-bottom: 2px solid #4b6eef !important;
}
.el-table::before{width:338px !important;}
</style>
